<template>
  <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
        <el-form-item label="报表类型">
          <el-input v-model="queryParams.menuName" placeholder="请输入报表类型" clearable/>
        </el-form-item>
        <el-form-item label="报表名称">
          <el-input v-model="queryParams.moduleName" placeholder="请输入报表名称" clearable/>
        </el-form-item>
        <el-form-item label="码头" prop="companyCod">
        <el-select v-model="queryParams.companyCod" placeholder="请选择码头" clearable>
          <el-option
              v-for="item in companyCodeOptions"
              :key="item.key"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['base:fineReport:add']"
          >新增</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button
            type="success"
            plain
            icon="el-icon-edit"
            size="mini"
            :disabled="single"
            @click="handleUpdate"
            v-hasPermi="['base:fineReport:edit']"
          >修改</el-button>
        </el-col>-->
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="selectIds.length===0"
            @click="handleDeleteSelect"
            v-hasPermi="['base:fineReport:remove']"
          >删除</el-button>
        </el-col> 
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="menuFineList" @selection-change="handleSelectionChange" fit border>
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="报表类型" prop="menuName" align="center" width="150"/>
        <el-table-column label="报表名称" prop="moduleName" align="center"/>
        <el-table-column label="报表url" prop="moduleUrl" align="center" width="250"/>
        <el-table-column label="码头" prop="companyCod" align="center" width="120">
          <template slot-scope="scope">
            <span v-html="getCompanyName(scope.row.companyCod)"></span>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort" align="center" width="100"/>
        <el-table-column label="创建人" prop="createBy" align="center" width="120"/>
        <el-table-column label="创建时间" prop="createTime" align="center" width="160"/>
        <el-table-column label="修改人" prop="updateBy" align="center" width="120"/>
        <el-table-column label="修改时间" prop="updateTime" align="center" width="160"/>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['base:goods:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['base:goods:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      
      <!-- 添加或修改货类货物对话框 -->
      <el-dialog :title="title" :visible.sync="open" width="70%" append-to-body>
          <el-form ref="form" :model="form" :rules="rules"  label-width="80px">
          <el-row>
            <el-col :span="10">
              <el-form-item label="报表类型" prop="menuName">
                <el-input v-model="form.menuName" style="width: 85%" clearable placeholder="请输入报表类型"/>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="报表名称" prop="moduleName">
                <el-input v-model="form.moduleName" style="width: 85%" clearable placeholder="请输入报表名称"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-form-item label="报表url" prop="moduleUrl">
                <el-input v-model="form.moduleUrl" type="textarea" :rows="3" placeholder="请输入报表url"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="码头" prop="companyCod">
                <el-select v-model="form.companyCod" clearable placeholder="请选择码头" style="width: 85%">
                    <el-option
                        v-for="item in companyCodeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
             <el-col :span="10">
              <el-form-item label="排序" prop="sort">
                <el-input v-model="form.sort" clearable placeholder="请输入排序" style="width: 85%"/>
              </el-form-item>
            </el-col>
          </el-row>
          </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>

  import { treeselect } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {addFineReport,getListFineReport,deleteFineReport,deleteFineReports,updateFineReport} from '@/api/base/fineReport'
  import tosWorkPlaceOptionsMixin from "@/mixin/tos/tosWorkPlaceOptionsMixin";

  export default {
    name:'',
    props:[''],
    mixins: [tosWorkPlaceOptionsMixin],
    components: { Treeselect },
    data () {
      return {
          showSearch:true,
          queryParams:{},
          menuFineList:[],
          title:"",
          open:false,
          form:{},
          deptOptions:[],
          single:false,
          multiple:false,
          loading:false,
          selectIds:[],
          rules: {
          menuName:[
            { required: true, message: "菜单名称不能为空", trigger: "blur" }
          ],
          moduleName:[
            { required: true, message: "报表名称不能为空", trigger: "blur" }
          ],
          moduleUrl:[
            { required: true, message: "报表url不能为空", trigger: "blur" }
          ]
        },
          clearDeptTree:false
      };
    },

    computed: {},

    beforeMount() {},

    mounted() {
        this.getList();
    },

    methods: {
        handleAdd(){
            this.open = true;
            this.title = "新增报表";
        },
        getDeptOptions(){
            treeselect().then(response =>{
            this.deptOptions = response.data;
            console.log(this.deptOptions)
            if(this.deptOptions && this.deptOptions.length){
                this.valueId = this.deptOptions[0].id
            }
        })
      },
      handleQuery(){
          this.getList();
      },
      resetQuery(){
        this.queryParams={};
        this.getList();
      },
      handleUpdate(row){
            this.open = true;
            this.title = "修改报表";
            this.form = JSON.parse(JSON.stringify(row));
            console.log(this.form.id)
      },
      handleDelete(row){
        this.$confirm('是否删除模板？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteFineReport(row.id).then(response =>{
            if(response&&response.code===200){
              this.getList();
              this.$message.success("删除成功！");
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      handleDeleteSelect(){
        this.$confirm('是否删除选中模板？', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteFineReports(this.selectIds).then(response =>{
            if(response&&response.code===200){
              this.getList();
              this.$message.success("删除成功！");
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
      },
      getList(){
          getListFineReport(this.queryParams).then(response =>{
              this.menuFineList = response.data;
          })
      },
      handleSelectionChange(selection){
        this.selectIds = selection.map(item => item.id)
      },
      submitForm(){
          this.$refs["form"].validate(valid => {
              if(valid){
                if (this.title==="新增报表"){
                  addFineReport(this.form).then(response =>{
                    if(response&&response.code ===200){
                      this.$message.success("添加成功！");
                      this.form = {}
                      this.open = false;
                      this.getList();
                    }
                  })
                }
                if (this.title==="修改报表"){
                  updateFineReport(this.form).then(response =>{
                    if(response&&response.code ===200){
                      this.$message.success("修改成功！");
                      this.form = {}
                      this.open = false;
                      this.getList();
                    }
                  })
                }
              }
          });
      },
      cancel(){
        this.form = {}
        this.open = false;
      },
      
      getCompanyName(companyCod){
        for (let i = 0; i < this.companyCodeOptions.length; i++) {
          if (this.companyCodeOptions[i].value === companyCod){
            return this.companyCodeOptions[i].label
          }
        }
      },
    },

    watch: {}

  }

</script>
<style>

</style>